<template>
  <div>
    <span style="color: white; display: flex; float: left; margin-left: 1%; margin-top: 1%"
      >电影口碑</span
    >
    <span class="rate">{{ movie.rate }}分</span>
    <div>
      <el-rate v-model="value" disabled style="margin-top: 10%; margin-left: -29%" />
    </div>

    <span style="color: white; display: flex; float: left; margin-top: 3%; margin-left: 1%"
      >累积票房</span
    >
    <span class="cnt">{{ movie.mcount }}</span>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref, onMounted } from 'vue';
const movie = ref('');
const value = ref();
onMounted(() => {
  const movieName = JSON.parse(sessionStorage.getItem('movieInfo'));
  axios.get('/api/movie/getMovieByMname/' + movieName).then(res => {
    if (res.data !== null) {
      movie.value = res.data[0];
      value.value = res.data[0].rate;
    } else {
      ElMessage({
        showClose: true,
        message: '网络错误！',
        type: 'error',
      });
    }
  });
});
</script>
<style lang="scss" scoped>
.rate {
  color: orange;
  display: flex;
  float: left;
  margin-top: 10%;
  margin-left: -25%;
  font-size: x-large;
}
.cnt {
  color: orange;
  display: flex;
  float: left;
  margin-top: 13%;
  font-size: x-large;
  margin-left: -26%;
}
</style>
